<script setup lang="ts">
import { ref, onMounted } from 'vue'
import type { TCommonProblem } from '../../../Types/system'
import { getCommonProblem } from '../../../api/system/problem'
import { ElMessage } from 'element-plus'

const problemList = ref<TCommonProblem[]>([])
const loading = ref(false)

// 获取问题列表
const getProblems = async () => {
	loading.value = true
	try {
		const res = await getCommonProblem()
		problemList.value = res.data.data
	} catch (error) {
		ElMessage.error('获取常见问题失败')
	} finally {
		loading.value = false
	}
}

onMounted(() => {
	getProblems()
})
</script>

<template>
	<div class="problem-container" v-loading="loading">
		<h2 class="page-title">常见问题</h2>
		<div class="problem-list">
			<div v-for="(problem, index) in problemList" :key="problem.id" class="problem-item">
				<h3 class="problem-title">
					<el-tag
						type="success"
						size="large"
						class="type-tag"
						style="margin-right: 10px;"
					>
						{{ `问题${index + 1}` }}
					</el-tag>
					<span>{{ problem.title }}</span>
				</h3>
				<div class="problem-content" v-html="problem.content"></div>
			</div>
		</div>
	</div>
</template>

<style scoped lang="scss">
.problem-container {
	padding: 20px;

	.page-title {
		text-align: center;
		margin-bottom: 30px;
		color: #303133;
	}

	.problem-list {
		display: flex;
		flex-direction: column;
		gap: 20px;
		max-width: 800px;
		margin: 0 auto;

		.problem-item {
			background: #fff;
			border-radius: 8px;
			padding: 20px;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

			.problem-title {
				color: #409eff;
				margin-bottom: 15px;
				font-size: 18px;
			}

			.problem-content {
				color: #606266;
				line-height: 1.6;

				:deep(p) {
					margin: 10px 0;
				}

				:deep(ul, ol) {
					padding-left: 20px;
				}
			}
		}
	}
}
</style>
